<template>
	<el-popover
		v-model:visible="popoverVisible"
		placement="bottom"
		:width="simple ? 400 : 700"
		trigger="click"
		@before-enter="beforeEnter"
		@after-leave="afterLeave"
	>
		<template #reference>
			<div class="div-select" :style={width}>
				<!-- <el-tooltip class="item" effect="dark" :content="tagNames" placement="top-start"> -->
					<div class="overflow-ellipsis">
						<span v-if="tagNames" class="inputs">{{tagNames}}</span>
						<span v-else class="inputs placeholders">请选择标签</span>
					</div>
				<!-- </el-tooltip>				 -->
				<el-icon class="icon-item tag"><CollectionTag/></el-icon>
				<el-icon class="icon-item clear" @click.stop="clearAll"><CircleClose /></el-icon>
			</div>
		</template>
		<div class="content">
			<div class="panel">
				<select-tag-panel ref="selectTagPanelRef" :simple="simple" :showTab="showTab" :type="type"/>
			</div>
			<div class="dialog-footer">
				<el-button size="small" @click="handleCancel">取消</el-button>
				<el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
			</div>
		</div>
	</el-popover>
</template>

<script setup>
	import { CollectionTag, CircleClose } from '@element-plus/icons-vue'
	import tool from '@/utils/tool'

	const emits = defineEmits(['update:value'])

	const props = defineProps({
		value: {
			type: [Array],
		},
		simple: {
			type: Boolean,
			default: false
		},
		showTab: {
			type: Boolean,
			default: true
		},
		width: { 
			type: String,
			default: '100%'
		},
		type: {
			type: [Number, null],
			default: 0 // 0或null-全部 1-线索 2-客户
		}
	})

	const popoverVisible = ref(false)
	const selectTagPanelRef = ref(null)
	const selectTags = ref(null);
	const tagNames = computed(() => selectTags.value && selectTags.value.tagNameList ? selectTags.value.tagNameList.join(','): '')
	
	/**
	 * 数据流转
	 *  */	
	watch(()=>props.value, (n, o) => {
		nextTick(()=>{
			// console.log('watch');
			selectTagPanelRef.value?.setTagIdList(n)
			setSelectTags(selectTagPanelRef.value)
		})
	})
	const setSelectTags = (data) => {
		selectTags.value = tool.deepClone({tagIdList: data?.tagIdList, tagNameList: data?.tagNameList});
	}

	/**
	 * 操作
	 */
	const handleCancel = () => {
		popoverVisible.value = false;
	}
	const handleSubmit = () => {
		setSelectTags(selectTagPanelRef.value)
		emits('update:value', selectTags.value?.tagIdList)
		handleCancel();
	}
	const clearAll = () => {
		selectTags.value = null;
		selectTagPanelRef.value?.clear()
		emits('update:value', [])
	}

	/**
	 * 窗口显隐处理
	 */
	const beforeEnter = () => {
	}
	const afterLeave = () => {
		// 恢复
		nextTick(() => {
			console.log(444, selectTags.value?.tagIdList);
			selectTagPanelRef.value?.setTagIdList(selectTags.value?.tagIdList)
		})
	}
</script>

<style scoped lang="less">
	.overflow-ellipsis{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.div-select{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: var(--text-color);
		position: relative;
		cursor: pointer;
		border: 1px solid var(--border-color-base);
    	border-radius: 2px;
		width: 100%;
		height: 32px;
		padding: 4px 20px 4px 11px;
		.placeholders{
			color: #ccc
		}
		.icon-item{
			position: absolute;
			right: 10px;
			top: 8px;		
			&.tag{
				color: rgba(0, 0, 0, 0.25);
				pointer-events: none;
			}
			&.clear{
				display: none;
				color: rgba(0, 0, 0, 0.55);
				background-color: #fff;
			}
		}
		&:hover .clear{
			display: inline-block;
		}
	}
	.content {
		.panel{
			height: 200px;
			overflow:auto;
		}
		.dialog-footer{
			text-align: right;
			padding-top: 10px;
		}
	}
</style>
